<template>
  <div class="login-container">
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div>
<!--    <div class="login_box">-->
<!--      <div class="avatar_box">-->
<!--        <img src="../assets/logo.png"/>-->
<!--      </div>-->
<!--    </div>-->
    <el-form :model="ruleForm2" :rules="rules2"
             status-icon
             ref="ruleForm2"
             label-position="left"
             label-width="0px"
             class="demo-ruleForm login-page">
      <h3 class="title">PIS系统监测平台</h3>
      <el-form-item prop="username">
        <el-input type="text"
                  v-model="ruleForm2.username"
                  auto-complete="off"
                  placeholder="用户名"
                  prefix-icon="el-icon-user"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password"
                  v-model="ruleForm2.password"
                  auto-complete="off"
                  placeholder="密码"
                  prefix-icon="el-icon-unlock"
        ></el-input>
      </el-form-item>
      <el-checkbox
        v-model="checked"
        class="rememberme"
      >记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    export default {
      name: "Login",
      components: {},
      data() {
        return {
          logining: false,
          // 登录页背景图片
          imgSrc: require('../../static/bg.jpg'),
          ruleForm2: {
            username: 'admin',
            password: '',
          },
          rules2: {
            username: [{required: true, message: '账号不能为空，请输入账号', trigger: 'blur'}],
            password: [{required: true, message: '请输入密码', trigger: 'blur'}]
          },
          checked: false
        }
      },
      methods: {
        handleSubmit(event) {
          this.$refs.ruleForm2.validate((valid) => {
            if (valid) {
              this.logining = true;
              if (this.ruleForm2.username === 'admin' &&
                this.ruleForm2.password === '1') {
                this.logining = false;
                // localStorage.setItem('user', this.ruleForm2.username);
                // 登录标志，存入缓存
                sessionStorage.setItem('islogin',"1");
                this.$router.push({path: '/Tag01',query:{username:this.ruleForm2.username}});
              } else {
                this.logining = false;
                this.$alert('账号或密码错误!', '错误', {
                  confirmButtonText: '退出'
                })
              }
            } else {
              console.log('error submit!');
              return false;
            }
          })
        }
      }
    }

</script>

<style scoped>
  body{
    margin: 0;
    padding: 0;
  }
  .title{
    text-align: center;
  }
  .background{
    width: 100%;
    height: 100%;  /**宽高100%是为了图片铺满屏幕 */
    z-index: -1;
    position: absolute;
  }
  .login-container {
    width: 100%;
    height: 100%;
    z-index:1;
    position: absolute;
  }
  .login-page {
    opacity: 0.8;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 15% auto;
    width: 350px;
    padding: 1% 3% 1%;
    background: #fff;
    border: 2px solid #f5f5ff;
    box-shadow: 0 0 25px #cac6c6;
  }
  label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
  }
</style>
